<script >

import { getProList, addItem, editItem, delItem } from '@/api/ykx.js'
import { ElMessage } from 'element-plus'


export default {
  data() {
    return {
      ProList: [],
      currentPage: 1,
      proClass: []
    }
  },

  mounted() {
    getProList().then(res => {
      console.log(res)
      this.ProList = res
    })
  },

  computed: {
    // 根据当前页码获取到当前页的数据
    computedData() {
      return this.ProList.slice((this.currentPage - 1) * 10, (this.currentPage - 1) * 10 + 10)
    }
  },

  methods: {
    //增加数据按钮
    addClick() {
      addItem({
        'proClass': '1',
        'proName': '2',
        'proSex': '3',
        "number": '4',
        'proList': '5',
        "prodata": '6',
      }).then(res => {
        console.log(res);
      })
    },

    // 编辑按钮
    editClick(item) {

      console.log(item);
    },

    // 删除数据
    delClick(row) {
      console.log(1111);
      delItem(row).then((res) => {
        if (res.code == 200) {
          ElMessage.success('删除成功')
        }
        getProList().then(res => {
          console.log(res)
          this.ProList = res
        })
      })
    },


    // select 选择器
    changeCLick() {
      console.log(1111);
    }
  },
  // components:{
  //   
  // }

}


</script>

<template>
  <el-container>
    <el-header>
      <span style="font-size: 30px;">今日点名</span>
    </el-header>
    <el-main>
      <div style="margin-top: 20px;">
        <span>考勤日期： </span>
        <el-date-picker placeholder="请选择" />
        <span style="margin-left: 20px;">考勤班级： </span>
        <el-select v-model="proClass" @change="changeCLick" placeholder="Select">
          <el-option v-for="item in ProList" :key="item.number" :value="item.proClass" />
        </el-select>
        <el-button @click="addClick" style="margin-left: 30px;" type="success" plain>添加</el-button>
      </div>
      <!-- 表格区域 -->
      <div style="margin-top: 20px;">
        <el-table :data="ProList" stripe style="width: 100%" height="500px">
          <el-table-column type="index" :index="(currentPage - 1) * 10 + 1" label="序号" width="180" />
          <el-table-column prop="proClass" label="年级班级" width="180" />
          <el-table-column prop="proName" label="学生姓名" width="180" />
          <el-table-column prop="proSex" label="性别" width="180" />
          <el-table-column prop="number" label="学籍号" width="180" />
          <el-table-column prop="proList" label="考勤状态" width="180" />
          <el-table-column label="编辑信息" width="180">
            <template #default="scope">
              <el-button type="warning" @click="editClick(scope.row)">编辑</el-button>
              <el-button type="danger" @click="delClick(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" v-model:current-page="currentPage" :total="ProList.length" />
      </div>
    </el-main>

  </el-container>
</template>

<style lang="scss">
.el-container {
  background-color: #f7f7f7;
  height: 100%;
  /* position:relative; */


  .el-header {
    height: 50px;
    background-color: cornflowerblue;
    text-align: center;
    line-height: 50px;


  }

  .el-main {
    /* padding: 20px; */
    margin-top: 20px;
    background-color: chocolate;
  }
}
</style>